﻿<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>关键词查询</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<script src="/static/js/jquery.min.js"></script>
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<style>
  *{
    padding:0px;
    margin: 0px;
  }
  body{
    background-color: #eee;
  }
  ul{
    display: block;
    list-style: none;
  }
  ul li {
    list-style: none;
  }
  .lyear-layout-header {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 4;
      /* padding-left: 240px; */
      background-color: #fff;
      -webkit-transition: padding 0.3s;
      transition: padding 0.3s;
      -webkit-box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
      -moz-box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
      box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
      height: 70px;
  }
  .topbar {
      width: 100%;
      display: flex;
      /* -webkit-box-pack: justify; */
      /* justify-content:baseline; */
      -webkit-box-align: center;
      align-items: center;
      height: 70px;
  }
  .topbar input[type=text]{
      display: block;
      margin-left: 1.25%;
      padding-left: 1.25%;
      /* height: 40px; */
      line-height: 40px;
      width: 70%;
      border: 1px solid #888888; /* 设置边框宽度为1像素，颜色为灰色 */
      border-right:none;
      border-radius: 10px 0px 0px 10px; /* 设置边框圆角 */
      background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
  }
  .topbar input[type=text]:focus{
    /* border-right:none; */
  }
  .topbar input[type=button]{
      display: block;
      /* height: 40px; */
      line-height: 40px;
      width: 25%;
      border: 1px solid #777777; /* 设置边框宽度为1像素，颜色为灰色 */
      border-left:none;
      border-radius: 0px 10px 10px 0px; /* 设置边框圆角 */
      font-size: 16px;
      background-color: white;
      color: #0080FF;
      font-weight: bold;
  }
  .lyear-layout-content{
    margin: 75px auto;
    width: 100%;
    background-color: #f1f1f1;
  }
  .lyear-layout-content ul {
    width: 95%;
    padding:2.5%;
    background-color: #fff;
  }
  .lyear-layout-content ul li span{
    font-size: 18px;
    color: #666;
  }
  .lyear-layout-content ul li span b{
    color: red;
  }
  .content-div{
    width: 100vw;
  }
  .text-left,
  .div-left{
    display: block;
    width: 90%;
    padding-bottom:10px;
    margin:10px 5%;
    /* border-bottom: 1px solid #777777; */
  }
  .input-checkbox,
  .input-radio{
    display: inline-block;
    width: 40vw;
    margin-left:5vw;
  }
  .main-div{
    display: block;
    margin:10px auto;
    padding:20px 0px;
    width: 100vw;
    background-color: #fff;
  }
  
  .div-right{
    width: 90vw;
    padding:2px 5vw;
  }

  .div-right div{
    width: 90vw;
    margin: 5px auto;
  }

  .div-right div span{
    display: inline-block;
    height: 30px;
    line-height: 30px;
  }

  .div-right div label{
    display: inline-block;
    width: 15vw;
    height: 30px;
    line-height: 30px;
  }

  .div-right div label input{

  }

  footer{
    border-top:1px solid red;
    position: fixed;
    left:0px;
    bottom: 0px;
    height: 75px;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-items: content;
    background-color: #fff;
  }

  footer .footer-left{
      height: 55px;
      width: 70vw;
      margin-left: 5vw;
      padding:10px 0px;
  }

  footer .footer-left span{
    display: block;
    height: 30px;
    line-height: 30px;
    color: #333;
    font-size: 20px;
  }
  footer .footer-left span:nth-child(2){
    font-size: 16px;
    height: 25px;
    line-height: 25px;
  }

  footer .footer-left span b{
    color: red;
  }

  footer .footer-right{

  }

  .keywords{
    width: 100vw;
  }
  .keywords .keyword-info{
    margin: 5px 0px;
    background-color: wheat;
    text-indent: 5vw;
    line-height: 55px;
    height: 55px;
    display: flex;
    justify-self: center;
    align-self: center;
  }

  .keyword-info .keyword-info-left{
    width: 45vw;
  }

  .keyword-info .keyword-info-right{
    color: red;
  }

  .height-75px{
    height: 80px;
  }
</style>
</head>
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <header class="lyear-layout-header">
      <nav class="navbar navbar-default">
        <div class="topbar">
            <input type="text" id="search-keyword">
            <input type="button" value="搜索" onclick="keyword()">
        </div>
      </nav>
    </header>
    <div class="height-75px"></div>
    <div class="keywords" id="keywords">
    </div>
    <div class="main-div">
      <div class="div-left">
        推广区域:
      </div>
      <div class="div-right address-list">
          <div>
              <label for="全国" onclick="set_price('selectedAll')">
                <input type="checkbox" id="全国" name="area" checked>全国
              </label>
          </div>
          <div>
              <span>华北:</span>
              <label for="天津" onclick="set_price()">
                  <input type="checkbox" value="天津" id="天津" name="area">天津
              </label>
              <label for="河北" onclick="set_price()">
                  <input type="checkbox" value="河北" id="河北" name="area">河北
              </label>
              <label for="山西" onclick="set_price()">
                  <input type="checkbox" value="山西" id="山西" name="area">山西
              </label>
              <label for="内蒙古" onclick="set_price()">
                  <input type="checkbox" value="内蒙古" id="内蒙古" name="area">内蒙古
              </label>
          </div>
          <div>
              <span>华东:</span>
              <label for="上海" onclick="set_price()">
                  <input type="checkbox" id="上海" value="上海" name="area">上海
              </label>
              <label for="浙江" onclick="set_price()">
                  <input type="checkbox" id="浙江" value="浙江" name="area">浙江
              </label>
              <label for="山东" onclick="set_price()">
                  <input type="checkbox" id="山东" value="山东" name="area">山东
              </label>
              <label for="江苏" onclick="set_price()">
                  <input type="checkbox" id="江苏" value="江苏" name="area">江苏
              </label>
              <label for="安徽" onclick="set_price()">
                  <input type="checkbox" id="安徽" value="安徽" name="area">安徽
              </label>
              <label for="福建" onclick="set_price()">
                  <input type="checkbox" id="福建" value="福建" name="area">福建
              </label>
              <label for="江西" onclick="set_price()">
                  <input type="checkbox" id="江西" value="江西" name="area">江西
              </label>
          </div>
          <div>
              <span>华中:</span>
              <label for="河南" onclick="set_price()">
                  <input type="checkbox" id="河南" value="河南" name="area">河南
              </label>
              <label for="湖北" onclick="set_price()">
                  <input type="checkbox" id="湖北" value="湖北" name="area">湖北
              </label>
              <label for="湖南" onclick="set_price()">
                  <input type="checkbox" id="湖南" value="湖南" name="area">湖南
              </label>
          </div>
          <div>
              <span>华南:</span>
              <label for="广东" onclick="set_price()">
                  <input type="checkbox" id="广东" value="广东" name="area">广东
              </label>
              <label for="广西" onclick="set_price()">
                  <input type="checkbox" id="广西" value="广西" name="area">广西
              </label>
              <label for="海南" onclick="set_price()">
                  <input type="checkbox" id="海南" value="海南" name="area">海南
              </label>
          </div>
          <div>
              <span>西南:</span>
              <label for="重庆" onclick="set_price()">
                  <input type="checkbox" id="重庆" value="重庆" name="area">重庆
              </label>
              <label for="四川" onclick="set_price()">
                  <input type="checkbox" id="四川" value="四川" name="area">四川
              </label>
              <label for="贵州" onclick="set_price()">
                  <input type="checkbox" id="贵州" value="贵州" name="area">贵州
              </label>
              <label for="云南" onclick="set_price()">
                  <input type="checkbox" id="云南" value="云南" name="area">云南
              </label>
              <label for="西藏" onclick="set_price()">
                  <input type="checkbox" id="西藏" value="西藏" name="area">西藏
              </label>
          </div>
          <div>
              <span>西北:</span>
              <label for="陕西" onclick="set_price()">
                  <input type="checkbox" id="陕西" value="陕西" name="area">陕西
              </label>
              <label for="甘肃" onclick="set_price()">
                  <input type="checkbox" id="甘肃" value="甘肃" name="area">甘肃
              </label>
              <label for="青海" onclick="set_price()">
                  <input type="checkbox" id="青海" value="青海" name="area">青海
              </label>
              <label for="宁夏" onclick="set_price()">
                  <input type="checkbox" id="宁夏" value="宁夏" name="area">宁夏
              </label>
              <label for="新疆" onclick="set_price()">
                  <input type="checkbox" id="新疆" value="新疆" name="area">新疆
              </label>
          </div>
          <div>
              <span>东北:</span>
              <label for="辽宁" onclick="set_price()">
                  <input type="checkbox" id="辽宁" value="辽宁" name="area">辽宁
              </label>
              <label for="吉林" onclick="set_price()">
                  <input type="checkbox" id="吉林" value="吉林" name="area">吉林
              </label>
              <label for="黑龙江" onclick="set_price()">
                  <input type="checkbox" id="黑龙江" value="黑龙江" name="area">黑龙江
              </label>
          </div>
      </div>
    </div>
    <div class="main-div mingxian">
        <label for="keyword_area1" class="text-left">
            平台类型:
        </label>
        <label for="keyword_area1" class="input-radio" onclick="keyword_area_selected('baidu')">
            <input type="radio" id="keyword_area1" name="keyword_area" value="baidu" checked> 
            百度
        </label>
        <label for="keyword_area2" class="input-radio" onclick="keyword_area_selected('douying')">
            <input type="radio" id="keyword_area2" name="keyword_area" value="douying">
            抖音
        </label>
    </div>
    <div class="main-div">
        <label class="text-left">
            投放时间
        </label>
        <label for="word_day1" class="input-radio" onclick="set_price()">
            <input type="radio" value="全年" id="word_day1" name="word_day" checked>全年
        </label>
        <label for="word_day2" class="input-radio" onclick="set_price()">
            <input type="radio" value="半年" id="word_day2" name="word_day">半年
        </label>
    </div>
    <div class="main-div">
        <label class="text-left">
            投放时长
        </label>
        <!-- <span class="input-checkbox">功能开发中。。。。。。</span> -->
        <label for="word_hover1" class="input-radio" onclick="set_price()">
            <input type="radio" id="word_hover1" name="word_hover" value="8:00-20:00" checked> 
            8:00-20:00
        </label>
        <label for="word_hover2" class="input-radio" onclick="set_price()">
            <input type="radio" id="word_hover2" name="word_hover" value="24小时">
            24小时
        </label>
    </div>
    <div class="main-div">
        <label class="text-left">展示形式</label>
        <label for="word_type1" class="input-checkbox">
            <input type="checkbox" id="word_type1" name="word_type" value="图文" checked>
            图文      
        </label>
        <label for="word_type2" class="input-checkbox">
            <input type="checkbox" id="word_type2" name="word_type" value="视频" checked>
            视频
        </label>
    </div>
    <div class="main-div" id="mes">
        <label class="text-left">
            价格类型
        </label>
        <label for="price_type1" class="input-radio" onclick="set_price()">
            <input type="radio" id="price_type1" name="price_type" value="normal" checked> 
            普通
        </label>
        <label for="price_type2" class="input-radio" onclick="set_price(1)">
            <input type="radio" id="price_type2" name="price_type" value="ocpc">
            OCPC
        </label>
    </div>
    <div class="main-div" id="keyword_type">
        <label class="text-left">
            投放类型
        </label>
        <label for="keyword_type1" class="input-radio" onclick="set_price()" id="keyword_type1_lable">
            <input type="radio" id="keyword_type1" name="keyword_type" value="1" checked> 
            全端(PC+手机)
        </label>
        <label for="keyword_type2" class="input-radio" onclick="set_price()" id="keyword_type2_lable">
            <input type="radio" id="keyword_type2" name="keyword_type" value="2">
            PC端
        </label>
        <label for="keyword_type3" class="input-radio" onclick="set_price()">
            <input type="radio" id="keyword_type3" name="keyword_type" value="3">
            手机端
        </label>
    </div>
  </div>
  <div class="height-75px"></div>
  <footer>
    <div class="footer-left">
      <span>
        总价:
        <b class="price" id="price"></b>
      </span>
      <span>
        热度:
        <b class="hot" id="hot"></b>
      </span>
    </div>
    <div class="footer-right">
      
    </div>
  </footer>
</div>
</body>
<script>
  let keywords_obj,keywords_data = [], keyword_area = [];
  selectedAll();
  function selectedAll(){
    if(!document.getElementsByName('area'))return;
    let area = document.getElementsByName('area');
    // console.log(area[0]);
    if(area[0].checked == true){
        area.forEach(item => {
            item.checked = true;
        });
    }else{
        area.forEach(item => {
            item.checked = false;
        });
    }
  }
  function keyword(){
    let keyword = document.getElementById("search-keyword").value;
    keywords_data = [];
    $.ajax({
        url:'/phone?keyword=' + keyword,
        type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
        data:{},
        dataType: 'json', // 预期服务器返回的数据类型  
        success: function(res) {
            if (res.code == 200){
                res.data.forEach(item => {
                    keywords_data.push({keyword:item.keyword,price:item.price,zz_all:item.zz_all,baiduyingxiao_all:item.baiduyingxiao_all});
                });
                set_price();
            }
        }
    });
  }
  function set_price(){
    let obj = {area:[],word_type:[]},
        word_hover = document.getElementsByName('word_hover'),
        word_day = document.getElementsByName('word_day'),
        price_type = document.getElementsByName('price_type'),
        word_type = document.getElementsByName('word_type'),
        area = document.getElementsByName('area');
        keywords_string = '',
        price = amount = 0;
      area.forEach(item => {
          if(item.id != '全国'){
              if (item.checked == true){
                  obj.area.push(item.id);
              }else{
                  area[0].checked = false;
              }
          }
      });
      if (obj.area.length == 30)area[0].checked = true;
      price_type.forEach(item => {
          if(item.checked == true)
              obj.price_type = item.value;
      }); 
      word_hover.forEach(item => {
          if(item.checked == true)
              obj.word_hover = item.value;
      }); 
      word_day.forEach(item => {
          if(item.checked == true)
              obj.word_day = item.value;
      });
      word_type.forEach(item => {
          if(item.checked == true)
              obj.word_type.push(item.value);
      });
      keywords_obj = obj;
      $.ajax({
          url:'/index/keyword/get_price',
          type: 'POST', // 请求类型，可以是 'GET' 或 'POST'  
          data:{
              con:obj,
              keywords:keywords_data,
              type:keywrod_type_selected(),
              keyword_area:keyword_area
          },
          dataType: 'json', // 预期服务器返回的数据类型  
          success: function(res) {
            let string = '',message = res.data,a = 0,b = 0,c = 0;
            document.getElementById('price').innerText = message.amount;
            message.keywords.forEach(item => {
              a = parseInt(item.baiduyingxiao_all);
              b = parseInt(item.zz_all);
              c = c + a + b;
              string += '<div class="keyword-info"><div class="keyword-info-left">' + item.keyword + '</div><div class="keyword-info-right">' + item.price + '</div></div>';
            });
            document.getElementById('keywords').innerHTML = string;
            document.getElementById('hot').innerText = c;
          }
      });
  }

  function keywrod_type_selected(){
    let selected = 1,keyword_type = document.getElementsByName('keyword_type');
    keyword_type.forEach(item => {
        if(item.checked == true)
            selected = item.value;
    });
    if (selected == 1)
        return 'price';
    else if(selected == 2)
        return 'pc_price';
    else
        return 'phone_price';
  }
</script>
</html>